<template>
  <div class="index">
    <el-container class="index-container">
      <el-aside :class="addfold?'flod nav':'nav'" :style="'width:'+navwidth+'px'">
        <div class="icon" @click="shortNav">
          <i :class="addfold?'el-icon-s-unfold':'el-icon-s-fold'"></i>
          <!-- <img class="" src="@/assets/images/fold.png" alt=""/> -->
        </div>
        <div class="logo clearfix">
          <img class="img_logo" src="@/assets/images/common/logo_icon.svg" alt />
        </div>
        <div class="nav-main">
          <router-link :to="{ path: '/main/recordMain' }" tag="a">
            <div class="img1"></div>
            <span>日志管理</span>
          </router-link>
          <router-link :to="{ path: '/main/distinguish' }" tag="a">
            <div class="img2"></div>
            <span>识别结果</span>
          </router-link>
          <router-link :to="{ path: '/main/imageProcess' }" tag="a">
            <div class="img3"></div>
            <span>图像处理</span>
          </router-link>
        </div>
      </el-aside>
      <el-container class="app-main">
        <el-header style="height:55px;">
          <topHeader />
        </el-header>
        <el-main>
          <div class="main">
            <Breadcrumb />
            <transition name="fade-transform" mode="out-in">
              <router-view />
            </transition>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
import { getUserInfo } from '@/utils/auth';
import topHeader from "@/components/top_header.vue";
import Breadcrumb from "@/components/Breadcrumb";
export default {
  name: "Main",
  components: {
    topHeader,
    Breadcrumb,
  },
  data() {
    return {
      navwidth: 244,
      addfold: false,
      roleId:'',
      account: ''
    };
  },
  beforeDestroy() {
    /* 销毁动态监听屏幕尺寸 */
    window.removeEventListener("resize", this.setSize);
  },
  mounted() {
    // 动态监听获取屏幕的总的宽度
    window.addEventListener("resize", this.setSize);
    /* 初始化设置一次屏幕尺寸 */
    this.setSize();
    this.roleId = getUserInfo().role_id;
    // console.log(this.roleId)
    this.account = getUserInfo().account;
  },
  methods: {
    shortNav() {
      !this.addfold;
      if (this.addfold) {
        this.navwidth = 244;
        this.addfold = false;
      } else {
        this.navwidth = 60;
        this.addfold = true;
      }
    },
    /* 动态更改页面尺寸方法 */
    setSize() {
      const _this = this;
      let clientWidth = document.body.clientWidth;
      if (clientWidth <= 1224) {
        setTimeout(function () {
          _this.navwidth = 60;
          _this.addfold = true;
        }, 200);
      }
    },
  },
};
</script>
<style lang="scss">
.index {
  height: 100%;
  // max-width: 2000px;
  // margin: auto;
  &-container {
    height: 100%;
    .el-header {
      background-color: #fff;
    }
    .nav {
      width: 244px;
      height: 100%;
      background: #27b494;
      transition-duration: 0.2s;
      overflow: hidden;
      .icon {
        width: 64px;
        cursor: pointer;
        text-align: center;
        i {
          margin: 26px 0 24px 0;
          font-size: 22px;
          color: #fff;
        }
      }
      .logo {
        margin: 0 0 42px 0;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        width: 244px;
        height: 70px;
        .img_logo {
          /*width: 204px;*/
          /*height: 39px;*/
          /*margin: 0 15px 0 15px;*/
          height: 60px;
          margin: 0px 0px 0px 8px;
        }
      }
      &-main {
        a {
          width: 244px;
          height: 40px;
          line-height: 40px;
          text-align: center;
          color: #fff;
          display: flex;
          align-items: center;
          justify-content: space-between;
          border-left: 5px solid #27b494;
          div {
            width: 19px;
            height: 17px;
            background-image: url("../../assets/images/common/nav.svg");
            margin: 0 15px 0 15px;
          }
          .img1 {
            background-position: 0px -3px;
          }
          .img2 {
            background-position: 0px -44px;
          }
          .img3 {
            background-position: 0px -87px;
          }
          .img4 {
            background-position: 0px -216px;
          }
          .img5 {
            background-position: 0px -216px;
          }
          .img6 {
            background-position: 0px 18px;
          }
          .img7 {
            background-position: 0px -131px;
          }
          .img8 {
            background-position: 0px -257px;
          }
          .img9 {
            background-position: 0px 18px;
          }
          span {
            flex: 1;
            text-align: left;
            display: block;
          }
          &:hover {
            background: rgba(40, 141, 118, 0.5);
            border-left: 5px solid #288d76;
          }
        }
        /*.router-link-exact-active{*/
        /*background: rgba(40,141,118,0.5);*/
        /*border-left:5px solid #288d76;*/
        /*}*/
        .router-link-active {
          background: rgba(40, 141, 118, 0.5);
          border-left: 5px solid #288d76;
        }
      }
    }

    .flod {
      width: 60px;
      transition-duration: 0.2s;
      .logo {
        span {
          /*display: none; */
        }
      }
      a {
        span {
          display: none;
        }
      }
    }
    .el-main {
      box-sizing: border-box;
      padding: 0px;
      .main {
        /*width: 1024px;*/
        height: 100%;
        /*height:calc(100vh - 62px)!important;*/
        /*background:#fff;*/
      }
    }
  }
}
.app-main {
  margin-left: 10px;
  min-width: 980px;
}
h3 {
  /*font-size: 14px!important;*/
  color: #666;
  height: 37px;
  line-height: 37px;
  background: #fafafa;
  font-weight: normal;
}
.app-warp {
  padding: 10px;
  /*border:1px solid red;*/
  height: calc(100vh - 97px) !important;
  overflow-y: auto;
  background: #fff;
  /*滚动条整体部分,必须要设置*/
  &::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }
  /*滚动条的轨道*/
  &::-webkit-scrollbar-track {
    //background-color: #0099ff;
    background: #f0f0f0;
  }
  /*滚动条的滑块按钮*/
  &::-webkit-scrollbar-thumb {
    background: #cdcdcd;
  }
  &::-webkit-scrollbar-button:start {
    width: 10px;
    height: 12px;
    background: transparent url("../../assets/images/common/up.png") no-repeat 0
      2px;
    background-color: #f0f0f0;
    background-size: 100%;
  }
  &::-webkit-scrollbar-button:end {
    width: 10px;
    height: 12px;
    background: transparent url("../../assets/images/common/down.png") no-repeat
      0 2px;
    background-color: #f0f0f0;
    background-size: 100%;
    margin: auto;
  }
}
.app-left {
  height: calc(100vh - 163px) !important;
}
.app-right {
  height: calc(100vh - 163px) !important;
  margin-left: 10px;
}
</style>